<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js4.3作业1</title>
		<style type="text/css">
			ul{
				border: #333333 solid 1px;
				width: 200px;
				
			}
			ul li{
				list-style: none;
				border-bottom: #333333 solid 1px;
				margin-bottom: 3px;
			}
			 
		</style>
	</head>
	<body>
		<!--
			需求：
			编写一个html页面。页面有一个文本框。一个添加按钮.一个删除按钮。一个ul标签。
			文本框内输入后点击添加按钮。会向ul标签中添加一个li输出内容。
			点击删除按钮。会把li中对应li删除；参考:使用数组和循环；
		-->
		列表项名称：<input type="text" id="txtItem" /> <input type="button" value="添加" id="btnAdd" /> <input type="button" value="删除" id="btnRemove" />
		
		<!--显示当前ul中的li数量-->
		<div>ul中现在有<p id="pItemCount">0</p>个li</div>
		
		
		<ul id="ulItem">
			
		</ul>
		
		<script type="text/javascript">
			// 获取需要使用到的dom元素赋值给变量。避免多次从html文档中查找而影响效率
			
			// 确认添加按钮
			var btnAdd = document.getElementById("btnAdd");
			
			// 删除按钮
			var btnRemove = document.getElementById("btnRemove");
			
			// 文本框
			var txtItem = document.getElementById("txtItem");

			// ul
			var ulItem = document.getElementById("ulItem");
			
			// 显示ul中li数量的p标签
			var pItemCount = document.getElementById("pItemCount");
			
			// 记录当前的li使用的数组
			var nowItemList = [];
			
			// 添加按钮的点击事件。
			btnAdd.onclick = function(){
				var itemVal = txtItem.value.trim();
				if(!itemVal)
				{
					alert("请输入要添加的列表项名称");
					return;	
				}
				if(nowItemList.indexOf(itemVal) != -1){
					alert("该列表项已存在");
					return;
				}
				nowItemList.push(itemVal);
				initItem();
			}
			
			btnRemove.onclick = function(){
				var itemValue = txtItem.value.trim();
				if(!itemValue)
				{
					alert("请输入要删除的列表项名称");
					return;	
				}
				// 获取输入的列表项在数组中的索引
				var itemIndex = nowItemList.indexOf(itemValue);
				// 若结果为-1则说明输入的列表项并不存在。不需要删除
				if(itemIndex == -1){
					alert("该列表项不存在");
					return;
				}
				// 删除指定索引处的元素
				nowItemList.splice(itemIndex, 1);
				
				initItem();
			}
			
			// 使用数据数组初始化ul的内容
			function initItem(){
				var html = "";
				for(var i=0; i<nowItemList.length; i++){
					html += '<li>' + nowItemList[i] + '</li>';
				}
				ulItem.innerHTML = html;
				pItemCount.innerText = nowItemList.length;
			}
			
			
		</script>
	</body>
</html>
